JSX

JSX 是 JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标签。虽然还有其它方式可以编写组件，但大部分 React 开发者更喜欢 JSX 的简洁性，并且在大部分代码库中使用它。

JSX 规则

1. 只能返回一个根元素

2. 标签必须闭合

3. 使用驼峰式命名法给大部分属性命名！ 由于历史原因，aria-_ 和 data-_ 属性是以带 - 符号的 HTML 格式书写的。

实际上，JSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖。如下 JSX 代码：

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>;

// 会编译为：

React.createElement(MyButton, { color: "blue", shadowSize: 2 }, "Click Me");

不使用 JSX 创建元素

如果你不喜欢 JSX 或者无法在你的项目中使用它，你可以使用 createElement 作为替代方案。

import { createElement } from "react";

function Greeting({ name }) {
    return createElement(
        "h1",
        { className: "greeting" },
        "你好",
        createElement("i", null, name),
        "。欢迎！"
    );
}

// 对比

function Greeting({ name }) {
    return (
        <h1 className="greeting">
            你好<i>{name}</i>，欢迎！
        </h1>
    );
}